<template>
<div>
  <div>
    <h3 style="text-align: center">社区基本信息</h3>
    <h3 class="title">
      <Icon style="color: #235CA7" type="ios-albums-outline" />
      <span class="statistics_4">工作者人数</span>：{{workerNum}}</h3>
    <h3 v-show="communityDetailShow && communityDetail.area" class="title">
      <Icon style="color: #235CA7" type="ios-albums-outline" />
      <span class="statistics_2">面积</span>：{{communityDetail.area}}㎡</h3>
    <img v-show="communityDetailShow && communityDetail.label_img" style="margin-top: 10px" width="240" height="120px" :src="communityDetail.label_img" alt="">
  </div>
</div>
</template>

<script>
import { getCodeByID, getCommunityCount, getCompanyDetailByID } from '../../../../api/eventlist'

export default {
  name: 'community-detail',
  props: {
    pickID: {
      type: String
    },
    pickGrade: {
      type: String
    }
  },
  data () {
    return {
      communityDetail: {},
      communityDetailShow: true,
      workerNum: 0
    }
  },
  methods: {
    init (e1, e2) {
      let data = {
        community_id: e2
      }
      getCompanyDetailByID(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.communityDetail = ret.data.data
          this.communityDetailShow = true
        } else if (ret.data.errcode === 10003) {
          this.communityDetail = {}
          this.communityDetailShow = false
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    },
    getCodeByID (e) {
      let data = {
        community_id: e
      }
      getCodeByID(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.getCommunityCount(ret.data.data.code)
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    },
    getCommunityCount (e) {
      let data = {
        code: e
      }
      getCommunityCount(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.workerNum = ret.data.data.sum
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    }
  },
  watch: {
    pickID: function (val) {
      if (this.pickGrade === '5') {
        this.getCodeByID(this.pickID)
        this.init(this.pickGrade, this.pickID)
      }
    }
  }
}
</script>

<style scoped>
.statistics_2{
  letter-spacing: 20px;
  margin-left: 10px;
  font-size: 16px
}
.statistics_3{
  letter-spacing: 8px;
  margin-left: 10px;
  font-size: 16px
}
.statistics_4{
  letter-spacing: 2px;
  margin-left: 10px;
  font-size: 16px
}

</style>
